<template>
    <div class="a53">
  <!--    <router-view></router-view>-->
    <a-layout>
        <a-layout-header>
<!--            <Hello></Hello>-->
            <Hi msg="hellq111o"></Hi>
        </a-layout-header>
        <a-layout>
            <a-layout-sider>
                <a-menu theme="dark" mode="inline">
                    <a-menu-item :key="1">
                        <template #icon>
                           <AIcon icon="up-square-outlined"></AIcon>
                        </template>
                        <router-link to="/a3/student">菜单1</router-link>
                    </a-menu-item>
                    <a-menu-item :key="2">
                        <template #icon>
                            <AIcon icon="play-circle-outlined"></AIcon>
                        </template>
                        <router-link to="/a3/teacher">菜单2</router-link>
                    </a-menu-item>
                    <a-menu-item :key="3">
                        <template #icon>
                            <down-square-outlined />
                        </template>
                        菜单3
                    </a-menu-item>
                    <a-sub-menu :key="4" title="菜单4">
                        <template #icon>
                            <down-square-outlined />
                        </template>
                        <a-menu-item :key="41">菜单41</a-menu-item>
                        <a-menu-item :key="42">菜单42</a-menu-item>
                    </a-sub-menu>

                </a-menu>
            </a-layout-sider>
            <a-layout-content>
                <router-view></router-view>
            </a-layout-content>
        </a-layout>
    </a-layout>
    </div>

</template>

<style scoped>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.a53 {
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*    width: 100vw;
        height: 100vh;*/
    width: 100%;
    background-color: rgb(220, 249, 255);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='35' y='10' font-size='14' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3EA53(主页)%3C/text%3E%3C/svg%3E");
    padding: 20px;
    box-sizing: border-box;
}

.ant-layout-header {
    height: 50px;
    background-color: darkseagreen;
}

.ant-layout-sider {
    background-color: lightsalmon;
}

.ant-layout-content {
    background-color: aliceblue;
}

.ant-layout-footer {
    background-color: darkslateblue;
    height: 30px;
}

.ant-layout {
    height: 100%;
}

.ant-layout-has-sider {
    height: calc(100% - 50px);
}
</style>

<script setup lang="ts">
import {UpSquareOutlined,DownSquareOutlined} from "@ant-design/icons-vue";
// import AIcon1 from "../components/AIcon1.vue";
// import AIcon from "../components/AIcon";
import AIcon from "../components/AIcon3.tsx";
import Hello from "../components/Hello"
import Hi from "../components/Hi.tsx";
</script>
